<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 第一题 -->
    <h4>计时器</h4>
    <input type="text" id="times" disabled />
    <button id="start">开始</button>
    <button id="stop">stop</button>
    <hr />

    <!-- 第二题 二级联动 -->
    <h4>二级联动</h4>
    <select name="" id="province"></select>
    <select name="" id="city">
      <option value="">请选择市</option>
    </select>
    <hr />
    <!-- 第三题 -->
    <div id="advert">
      <span>我是广告（<i id="ns">5</i>）秒后自动关闭</span>
      <button id="btnoff" style="float: right; width: 40px">×</button>
    </div>
    <div id="cover"></div>
  </body>
  <style>
    * {
      margin: 0 auto;
    }
    body {
      position: relative;
    }
    #advert {
      width: 500px;
      height: 500px;
      background: burlywood;
      position: absolute;
      left: 37%;
      top: 150px;
      z-index: 9999;
    }
    #cover {
      width: 100%;
      background: rgba(000, 000, 000, 0.5);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;
    }
  </style>
  <script>
    var setTime,
      arr = [
        {
          name: '北京市',
          child: [
            {
              name: '朝阳区',
            },
            {
              name: '海淀区',
            },
            {
              name: '昌平区',
            },
          ],
        },
        {
          name: '河南省',
          child: [
            {
              name: '郑州市',
            },
            {
              name: '南阳市',
            },
            {
              name: '濮阳市',
            },
          ],
        },
      ],
      n = 5,
      ntime
    window.onload = function () {
      //计时器
      document.getElementById('start').addEventListener('click', function () {
        clearInterval(setTime)
        setTime = setInterval(function () {
          var textTime = new Date()
          var year = textTime.getFullYear(),
            month = textTime.getMonth() + 1,
            days = textTime.getDate(),
            hours = textTime.getHours(),
            mins = textTime.getMinutes(),
            s = textTime.getSeconds()
          document.getElementById(
            'times'
          ).value = `${year}-${month}-${days} ${hours}:${mins}:${s}`
        }, 1000)
      })
      document.getElementById('stop').addEventListener('click', function () {
        clearInterval(setTime)
      })
      //   二级联动
      //省
      //定义声明 省的option字符串模板
      var strHtml = '<option value="">请选择省份</option>'
      //循环省市数组
      for (let i in arr) {
        //找到每次循环的省名字
        strHtml += `<option value="${i}">${arr[i].name}</option>`
      }
      //找到省的下拉框对象
      var province = document.getElementById('province')
      //把循环拼接好的字符串模板 写入到省下拉框对象内
      province.innerHTML = strHtml
      //市
      //给省下拉框对象添加 值改变事件
      province.addEventListener('change', function () {
        //定义声明 市的option html字符串模板
        var cityHtml = '<option value="">请选择市</option>'
        //通过 this.value 获取到当前省的下标 ，然后循环市child
        for (let i in arr[this.value].child) {
          //开始拼接市的option节点
          cityHtml += `<option value="${i}">${
            arr[this.value].child[i].name
          }</option>`
        }
        //写入到页面上
        document.getElementById('city').innerHTML = cityHtml
      })

      //第三题 广告倒计时关闭
      document.getElementById('cover').style.height =
        window.screen.height + 'px'
      document.getElementById('btnoff').addEventListener('click', function () {
        fun()
      })
      ntime = setInterval(function () {
        document.getElementById('ns').innerHTML = --n
        if (n == 0) {
          fun()
          clearInterval(ntime)
        }
      }, 1000)
    }
    function fun() {
      document.getElementById('advert').style.display = 'none'
      document.getElementById('cover').style.display = 'none'
    }
  </script>
</html>
